<template>
	<view>
		<view v-if="$token">
			<view class="cu-bar bg-white margin-bottom">
				<view class="action text-orange">
					<text class="lg cuIcon-notification"></text>
					<text>点击关注公众号，不错过任何重要消息</text>
				</view>
			</view>
			<view class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub message-tab-item" :class="TabCur=='like'?'text-green cur':''"
						@click="tabSelect('like')">
						<view class="text-xxl margin-top">
							<view class="cuIcon-appreciatefill"></view>
						</view>
						<view>点赞</view>
					</view>
					<view class="cu-item flex-sub message-tab-item" :class="TabCur=='comment'?'text-green cur':''"
						@click="tabSelect('comment')">
						<view class="text-xxl margin-top">
							<view class="cuIcon-comment"></view>
						</view>
						<view>评论</view>
					</view>
				</view>
			</view>
			<MsgLike v-show="TabCur == 'like'"></MsgLike>
			<MsgComment v-show="TabCur == 'comment'"></MsgComment>
		</view>
		<login v-else></login>
	</view>
</template>

<script>
	import MsgLike from "./like.vue"
	import MsgComment from "./comment.vue"
	import login from '@/pages/login/login.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			MsgLike,
			MsgComment,
			login
		},
		data() {
			return {
				TabCur: 'like',
			};
		},
		computed: {
			...mapState(['$token'])
		},
		methods: {
			tabSelect(val) {
				this.TabCur = val;
			}
		}
	}
</script>

<style scoped>
	.message-tab-item {
		height: 150upx;
		line-height: 50upx;
	}
</style>
